<template>
    <div class="flex" style="background-color: #f8f8f8;">
        <!-- 左侧导航栏 -->
        <div class="fixed left-0 top-0 h-full w-64 bg-white border-r border-slate-200 shadow-sm" style="z-index: 1;">
            <div class="p-6 border-b border-slate-200">
                <div class="flex items-center">
                    <img src="https://ai-public.mastergo.com/ai/img_res/ad2371d26aca26a1b6379d3f18181e0c.jpg" alt="Logo" class="w-10 h-10 mr-3" />
                    <h1 class="text-xl font-semibold text-slate-800">教师后台管理</h1>
                </div>
            </div>
            <nav class="p-2">
                <div v-for="(item, index) in menuItems" :key="index" class="mb-2">
                    <!-- 现有菜单项 -->
                    <div>
                        <router-link v-if="!item.children" :to="item.path" class="w-full text-left p-3 rounded-lg hover:bg-indigo-50 flex items-center justify-between text-slate-700 transition-colors duration-200">
                            <div class="flex items-center">
                                <i :class="item.icon" class="mr-3"></i>
                                {{ item.name }}
                            </div>
                        </router-link>
                        <button v-else @click="toggleDropdown(index)" class="w-full text-left p-3 rounded-lg hover:bg-indigo-50 flex items-center justify-between text-slate-700 transition-colors duration-200">
                            <div class="flex items-center">
                                <i :class="item.icon" class="mr-3"></i>
                                {{ item.name }}
                            </div>
                            <i :class="[dropdownIndex === index ? 'fas fa-chevron-up' : 'fas fa-chevron-down']" class="text-xs"></i>
                        </button>
                        <transition name="fade" mode="out-in">
                            <div v-if="item.children && dropdownIndex === index" class="ml-6 mt-1">
                                <router-link
                                        v-for="child in item.children"
                                        :key="child.name"
                                        :to="child.path"
                                        class="w-full text-left p-2 rounded-lg hover:bg-indigo-50 flex items-center text-slate-600 text-sm transition-colors duration-200">
                                    <i :class="child.icon" class="mr-3 text-xs"></i>
                                    {{ child.name }}
                                </router-link>
                            </div>
                        </transition>
                    </div>
                </div>
                <!-- 退出按钮 -->
                <div class="mt-4">
                    <button @click="handleLogout" class="w-full text-left p-3 rounded-lg hover:bg-indigo-50 flex items-center justify-between text-slate-700 transition-colors duration-200">
                        <div class="flex items-center">
                            <i class="fas fa-sign-out-alt mr-3"></i>
                            退出
                        </div>
                    </button>
                </div>
            </nav>
        </div>

        <!-- 右侧内容 -->
        <div class="flex-1 p-6 overflow-auto bg-gray-100" style="width: 2000px; padding-bottom: 0; padding-top: 0; z-index: 0;">
            <router-view></router-view>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue';

    // 菜单项
    const menuItems = [
        { name: '工作台', icon: 'iconfont icon-gongzuotai', path: '/teacher/workBench' },
        {
            name: '审核管理',
            icon: 'iconfont icon-shenheguanli',
            children: [
                { name: '项目审核', icon: 'iconfont icon-xinjinxiangmushenhe', path: '/teacher/projectReview' },
                { name: '比赛审核', icon: 'iconfont icon-bisai', path: '/teacher/competitionReview' },
                { name: '实习审核', icon: 'iconfont icon-shixijiuye', path: '/teacher/internshipReview' },
                { name: '活动审核', icon: 'iconfont icon-huodong', path: '/teacher/ActivityReview' },
                { name: '通用技能审核', icon: 'iconfont icon-RectangleCopy', path: '/teacher/SkillsReview' },
                { name: '特殊学生审核', icon: 'iconfont icon-teshurenqun', path: '/teacher/SpecialReview' }
            ]
        },
        { name: '学生管理', icon: 'iconfont icon-teshurenqun', path: '/teacher/SpecialStudentManagement' },
        { name: '毕业去向统计', icon: 'iconfont icon-biyequxiang', path: '/teacher/GraduateDestinationStatistics' }
    ];

    const dropdownIndex = ref(null);

    // 切换下拉菜单
    const toggleDropdown = (index) => {
        dropdownIndex.value = dropdownIndex.value === index ? null : index;
    };

    // 处理退出逻辑
    const handleLogout = () => {
        // 清空用户状态、移除 Token 等逻辑
        localStorage.removeItem("prehaslogin")
        localStorage.removeItem('userInfo');
        // 重定向到登录页面
        window.location.href = '/login';
    };
</script>

<style scoped>
    .fade-enter-active, .fade-leave-active {
        transition: all 0.5s ease;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
        transform: translateY(-10px);
    }

    /* 退出按钮样式优化 */
    button {
    &:active {
         background-color: #e0e0e0;
     }
    }
</style>